<link rel="stylesheet" type="text/css"
      href="$request.contextPath/res/framework/datetimepicker/jquery.datetimepicker.css"/>
<script>
    window.UEDITOR_HOME_URL = "$request.contextPath/res/plugins/ueditor/";
</script>
<!-- #section:basics/content.breadcrumbs -->
<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed')
        } catch (e) {
        }
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="../project">爱播</a>
        </li>
        <li class="active">编辑</li>
    </ul>
    <!-- /.breadcrumb -->


    <!-- /section:basics/content.searchbox -->
</div>
<form class="form-horizontal" role="form" method="post" id="submitForm" action="./project/save"
      enctype="multipart/form-data">
    <input type="hidden" name="projectId" id="projectId" value="#if ($!proj.projectId) $proj.projectId #else 0 #end"/>
    <!-- /section:basics/content.breadcrumbs -->
    <div class="page-content">
        <div class="page-header">
            <div class="row" style="vertical-align: middle">
                <div class="col-xs-4" id="nav-search">
                </div>
                <div class="col-xs-8 text-right">
                    <button class="btn btn-prev btn-lg" type="button" onclick="load('project/list')">
                        <i class="ace-icon fa fa-arrow-left"></i>
                        返回
                    </button>
                    <button type="button" class="btn btn-danger btn-lg submitBtn">
                        <i class="ace-icon fa fa-floppy-o bigger-120 "></i>发布
                    </button>
                </div>
            </div>
        </div>
        <!-- /.page-header -->
        <div class="row">
            <div class="col-sm-12  col-xs-12 ">
                <!-- #section:elements.form -->
                <div class="form-group">
                    <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 发起人 </label>
                    <div class="col-sm-9  col-xs-12 ">
                        <select id="projectSender" name="projectSender">
                            <option value="">请选择项目发起人...</option>
                            #foreach ($val in ${UserList})
                                <option value="$val.uid" #if($val.uid == $!proj.projectSender) selected #end >
                                    $val.nickname
                                 </option>
                            #end
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 项目名称 </label>
                    <div class="col-sm-9  col-xs-12 ">
                        <input type="text" id="projectName" name="projectName" value="$!proj.projectName" placeholder="请输入项目名称..."
                               class="col-xs-10 col-sm-10"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 项目描述 </label>
                    <div class="col-sm-9  col-xs-12 ">
                        <textarea class="form-control" id="projectDesc" value="$!proj.projectDesc" name="projectDesc" rows="4" placeholder="请输入项目描述">$!proj.projectDesc</textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 目标票数 </label>
                    <div class="col-sm-9  col-xs-12 ">
                        <input type="text" id="targetVote" name="targetVote" value="$!proj.targetVote" placeholder="项目目标票数..."
                               class="col-xs-10 col-sm-10"/>
                    </div>
                </div>
                <div class="space-4"></div>
                  <div class="form-group">
                      <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 项目配图 </label>
                      <div class="col-sm-4  col-xs-12 ">
                          <label class="ace-file-input ace-file-multiple">
                              <input type="file" name="projectFile" id="projectFile">
                          </label>
                          <span class="help-block">
                              建议尺寸宽度在400像素以上,宽高2:1，仅支持jpg、png格式，文件小于2M
                          </span>
                      </div>
                  </div>
                <div class="space-4"></div>
                <div class="form-group">
                    <label class="col-sm-2  col-xs-12  control-label no-padding-right">
                        有效时间 </label>
                    <div class="col-sm-9 col-xs-12 ">
                                            <span class="input-icon">
                                                <input type="text" id="projectBegintime" value="#if($proj) $date.format('yyyy-MM-dd HH:mm:ss', $!proj.projectBegintime) #end" name="projectBegintime" placeholder="开始时间">
                                                <i class="ace-icon fa fa-clock-o green"></i>
                                            </span>
                        <span>~</span>
                                            <span class="input-icon">
                                                <input type="text" id="projectEndtime" value="#if($proj) $date.format('yyyy-MM-dd HH:mm:ss', $!proj.projectEndtime) #end" name="projectEndtime" placeholder="结束时间">
                                                <i class="ace-icon fa fa-clock-o green"></i>
                                            </span>
                        <span id="dateError">&nbsp;</span>

                    </div>
                </div>

                <div class="space-4"></div>
                <div class="form-group">
                    <label class="col-sm-2  col-xs-12  control-label no-padding-right">
                        内容 </label>
                    <div class="col-sm-9 col-xs-12">
                        <script id="editor" name="projectContent" type="text/plain" style="width:100%;">$!proj.projectContent</script>
                        </div>
                </div>
                <div class="space-4"></div>

                <div class="clearfix form-actions">
                    <div class="col-md-offset-4 col-md-8">
                        <button class="btn btn-danger btn-lg submitBtn" type="button">
                            <i class="ace-icon fa fa-check bigger-110"></i>
                            发布
                        </button>

                    </div>
                </div>

            </div>
            <div class="space-4"></div>
            <!--<div class="hr hr32 hr-dotted"></div>-->


        </div>

        <!-- /.col -->
    </div>

    <!-- /.row -->
    </div>
</form>

<!-- /.page-content -->
<script type="text/javascript" src="$request.contextPath/res/framework/datetimepicker/jquery.datetimepicker.js"></script>
<script type="text/javascript" charset="utf-8" src="$request.contextPath/res/plugins/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="$request.contextPath/res/plugins/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="$request.contextPath/res/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>

<script>
    var submitLock = false;
    var validator;
    var files = new Array();
    var uploadedObj = new Object();

    jQuery('#projectBegintime').datetimepicker({
        lang: 'ch',
        format: 'Y-m-d H:i:00',
        step: 1
    });
    jQuery('#projectEndtime').datetimepicker({
        lang: 'ch',
        format: 'Y-m-d H:i:00',
        step: 1
    });

    $('#projectFile').ace_file_input({
        style: 'well',
        btn_choose: '选择广告图',
        btn_change: null,
        no_icon: 'ace-icon fa fa-picture-o',
        thumbnail: 'large',
        droppable: true,
        allowExt: ['jpg', 'jpeg', 'png', 'gif'],
        allowMime: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
    });
    addExistFile("$!proj.projectImg");

    function addExistFile(val) {
        if (val && val.length>3) {
            console.log(val);
            $('#projectFile').ace_file_input('show_file_list', [{type: 'image', name: val}]);
            $('#projectFile').parent().find('img').css({width: '150px', height: '150px'}).show();
        }
    }

    var removeFile = function (file) {
        var response = jQuery.parseJSON(file.xhr.response);
        for (var index = 0; index < files.length; index++) {
            if (files[index].url == response.url) {
                files.splice(index, 1);
            }
        }
    }

    var options = {
        beforeSerialize: function () {
//            uploadObj["files"] = files;
            if($('#avatarFile').val() == '') {
                $('#avatarFile').remove();
            }
        },
        beforeSubmit: function () {
            if (submitLock) {
                return false;
            }
            loading('正在保存，请稍等...');
            submitLock = true;
            return true;
        },
        success: function (data) {
            submitLock = false;
            if (data.resultCode == 0) {
                succ('发表成功');
                delay(function () {
                    load('project/list');
                }, 1000);
            } else {
                error(data.resultMsg);
            }
        },
        error: function(){
            submitLock = false;
            requestError();
        },
        dataType: 'json',
        type: 'post',
        timeout: 50000
    };
    validator = $("#submitForm").validate({
        errorElement: "em",
        errorPlacement: function (error, element) {
            if (element.attr('id') == 'content') {
                element.next('p').append(error);
            } else {
                element.after(error);
            }
        },
        rules: {
            "projectSender": {
                required: true
            },
            "projectName": {
                required: true
            },
            projectContent: {
                required: true
            }
        },
        messages: {
            "projectSender": {
                required: '请选择项目发起人'
            },
            "projectName": {
                required: '请输入项目标题'
            },
            projectContent: {
                required: '请编辑项目内容'
            }
        },
        submitHandler: function (form) {
            if (submitLock) {
                return;
            }
            $(form).ajaxSubmit(options);
        }
    });

    $(function () {
        var ue = UE.getEditor('editor' , {initialFrameHeight:400 ,autoHeightEnabled:false});
        $('.submitBtn').click(function() {
            if (submitLock) {
                return;
            }
            if (!validator.valid()) {
                return;
            }
            $('#submitForm').ajaxSubmit(options);
        })
    });
</script>
</body>